<template>
  <div>
    <el-select
      size="small"
      v-model="brandId"
      @change="changeBrand"
      :filterable="isfilterable"
      :filter-method="pinyingMatch"
      placeholder="请选择"
      style="width: 100%"
      clearable
      @clear="clear"
    >
      <el-option
        :label="item.name"
        :value="item.value"
        v-for="(item, index) in brand"
        :key="index"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'CallPoliceIndex',
  props: {
    //必传 传进来的下拉列表
    optionlist: {
      type: Array,
      default: () => []
    },
    //非必传 传进来的默认的值,不传默认空
    defaultvalue: {
      type: [String, Number],
      default: ''
    },
    //非必传 传进来的是否需要过滤，默认为true，如果不需要传false
    isfilterable: {
      type: Boolean,
      default: true
    },
    //必传 传进来的name和value字段(就是要展示的字段和选中后要拿到的字段)
    valuekey: {
      type: Object
      // default:{name:'name',value:'value'}
    }
  },
  data() {
    return {
      brandId: '',
      brand: [], //下拉框所有数据
      copyBrand: []
    }
  },

  mounted() {},

  methods: {
    //下拉框设置拼音模糊搜索
    pinyingMatch(val) {
      this.$set(this, 'brandId', val)
      const pinyingMatch = require('pinyin-match')
      if (val) {
        var result = []
        this.copyBrand.forEach((e) => {
          var m = pinyingMatch.default.match(e.name, val)
          if (m) {
            result.push(e)
          }
        })
        //搜索到相应的数据就把符合条件的n个数据赋值brand
        this.brand = result
      } else {
        //没有搜索到数据，就还展示所有的brand
        this.brand = this.copyBrand
      }
    },
    clear() {
      this.brand = this.copyBrand
    },
    // 下拉框选择事件
    changeBrand(val) {
      this.$set(this, 'brandId', val)
      this.$emit('changeselect', val)
    }
  },
  watch: {
    deep: true,
    immediate: true,
    // 传进来的下拉列表数据，由于传进来的数据中name值和value值都不一致 所以在此处理统一数据
    optionlist(val) {
      val.forEach((ele) => {
        ele['name'] = ele[this.valuekey.name]
        ele['value'] = ele[this.valuekey.value]
      })
      this.brand = this.copyBrand = val
    },
    defaultvalue(val) {
      if (val) this.$set(this, 'brandId', val)
    }
  }
}
</script>
